<template>
  <div class="commodity-container">
    <div class="header">
      <div class="search">
        <input class="search-box" type="search" v-model="searchContent" @click="goSearch" placeholder="小龙虾"
          placeholder-style="font-size: 13px; color: #999;">
        <i class="iconfont icon-search">&#xe60d;</i>
        <i class="iconfont icon-clear" v-show="searchContent" @click="searchContent = ''">&#xe64b;</i>
      </div>
      <div class="search-words">搜索</div>
    </div>
    <scroll-view scroll-x class="all-industries">
      <div class="all-industry choosed">全部</div>
      <div class="all-industry">肉类</div>
      <div class="all-industry">肉类</div>
      <div class="all-industry">肉类</div>
      <div class="all-industry">肉类</div>
      <div class="all-industry">肉类</div>
      <div class="all-industry">肉类</div>
    </scroll-view>
    <div class="pro-list">
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="other-msg">
            <div class="other-words">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;250.00</div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="other-msg">
            <div class="other-words">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;250.00</div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="other-msg">
            <div class="other-words">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;250.00</div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      searchContent: ''
    }
  },
  computed: {
  },
  methods: {},
  onShow () {
    this.showIcon = 1
  }
}
</script>

<style>
.commodity-container {
  background-color: #fff;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  width: 100%;
}

.search {
  position: relative;
  background-color: #fff;
  padding: 18rpx 0 18rpx 30rpx;
}

.search-box {
  padding: 15rpx 65rpx 15rpx 90rpx;
  font-size: 26rpx;
  background-color: #f4f4f4;
  border-radius: 20rpx;
  width: 430rpx;
}

.icon-search {
  font-size: 32rpx;
  color: #b5b5b5;
  position: absolute;
  top: 42rpx;
  left: 75rpx;
}

.icon-clear {
  font-size: 32rpx;
  color: #b5b5b5;
  position: absolute;
  top: 42rpx;
  right: 26rpx;
}
.search-words {
  padding-right: 40rpx;
  font-size: 32rpx;
  color: #22ac38;
}
.all-industries {
  background: #ffffff;
  white-space: nowrap;
  border-top: 4rpx solid #f9f9f9;
  border-bottom: 4rpx solid #f9f9f9;
}
.all-industry {
  display: inline-flex;
  padding: 0 48rpx;
  line-height: 84rpx;
  font-size: 32rpx;
}
.product {
  display: inline-flex;
  width: 100%;
}
.product + .product {
  border-top: 2rpx solid #f9f9f9;
}
.product-img {
  margin: 10rpx 20rpx;
  /* width: 230rpx;
  height: 160rpx; */
  width: 240rpx;
  height: 160rpx;
  box-sizing: border-box;
}

.right-desc {
  padding-right: 20rpx; 
  height: 160rpx;
  font-size: 26rpx;
  width: 440rpx;
}
.product-name,
.product-spec {
  font-size: 26rpx;
  line-height: 55rpx;
}
.text-nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.other-msg {
  display: flex;
}

.other-words {
  width: 370rpx;
}
.product-spec {
  color: #666;
}

.product-price {
  margin-top: 25rpx;
  color: #e62225;
}

.icon-cart {
  margin-top: 50rpx;
  background-color: #22ac38;
  font-size: 30rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 57rpx;
  height: 57rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
